<template>
    <div class="sidebar">
            <el-col :span="12">
                <el-menu
                        class="sidebar-el-menu"
                        :default-active="onRoutes"
                        :collapse="collapse"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#334256"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        router>

                    <el-menu-item v-for="item in items" :index="item.index" :key="item.index">
                        <i :class="item.icon"></i>
                        <span slot="title">{{item.title}}</span>
                    </el-menu-item>
                </el-menu>
            </el-col>


    </div>
</template>

<script>
    import bus from "../../assets/js/bus";
    export default {
        data(){
            return{
                collapse: false,
                items:[
                    {
                        icon:'el-icon-s-home',
                        index:"Index",
                        title:"首页"
                    },
					{
					    icon:'el-icon-s-goods',
					    index:"Product",
					    title:"产品管理"
					},
                    {
                        icon:'el-icon-user-solid',
                        index:"User",
                        title:"用户管理"
                    },
                    {
                        icon:'el-icon-menu',
                        index:"Category",
                        title:"分类管理"
                    },
					{
						icon:'el-icon-s-finance',
						index:"Lend",
						title:"借出管理"
					},
					{
						icon:'el-icon-s-tools',
						index:"Permission",
						title:"权限管理"
					},
					{
						icon:'el-icon-s-promotion',
						index:"Status",
						title:"状态管理"
					},
					{
						icon:'el-icon-s-cooperation',
						index:"Repair",
						title:"维修管理"
					}
					
                ]

                }
            },
        computed:{
            onRoutes(){
                return this.$route.path.replace('/','');
            }
        },
        created(){
            //通过Bus进行组件间的通信，来折叠侧边栏
            bus.$on('collapse',msg =>{
                this.collapse = msg
            })
        },
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>
<style scoped>
    .sidebar {
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        background-color: #334256;
        overflow-y: scroll;
    }

    .sidebar::-webkit-scrollbar{
        width: 0;
    }

    .sidebar-el-menu:not(.el-menu--collapse){
        width: 150px;
    }

    .sidebar >ul {
        height: 100%;
    }
</style>
